<template>
  <div style="height: 100%;width: 100%">
    <div style="height: 50px;">
      <el-row type="flex" :gutter="100" align="bottom">
        <el-col :span="6">
          <el-input style="width: 200px" v-model="name" autosize prefix-icon="el-icon-document" placeholder="根据人名搜索"></el-input>
        </el-col>
        <el-col :span="6">
          <el-select style="width: 150px" v-model="permissionCode" placeholder="根据角色搜索">
            <el-option
              v-for="item in permissionsList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

        </el-col>
        <el-col :span="6">
          <el-button  type="primary" icon="document" @click="searchLoading">搜索</el-button>
          <el-button  type="primary" icon="document" @click="addUser">新增</el-button>
        </el-col>
      </el-row>
    </div>
    <div style="height: -webkit-calc(100% - 50px);margin-top: 10px">
      <xjr-table @custom-click="changeUser" :loading="loading" ref="user_table" :list="tableData" :headers="cols"></xjr-table>
    </div>
    <el-dialog :destroy-on-close="true"  width="30%" title="新增用户" :visible.sync="showDialog">
      <el-form ref="form" :model="user" label-width="80px" :rules="rules">
        <el-form-item label="用户名"  prop="userName">
          <el-input v-model="user.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input  v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input  v-model="user.name"></el-input>
        </el-form-item>
        <el-form-item label="选择角色" prop="permissionCode">
          <el-select clearable style="width: 150px" v-model="user.permissionCode" placeholder="选择角色">
            <el-option
              :key="'1'"
              label="学生"
              value="1">
            </el-option>
            <el-option
              :key="'2'"
              label="教师"
              value="2">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择班级" prop="classNo" v-show="user.permissionCode!='' && user.permissionCode=='1'">
          <el-select clearable style="width: 150px" v-model="user.classNo" placeholder="选择班级">
            <el-option
              v-for="c in classes"
              :key="c.classNo"
              :label="c.className"
              :value="c.classNo">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择辅导员" prop="teacher" v-if="user.permissionCode!='' && user.permissionCode=='1'">
          <el-select clearable style="width: 150px" v-model="user.teacher" placeholder="选择辅导员">
            <el-option
              v-for="t in teachers"
              :key="t.guid"
              :label="t.name"
              :value="t.guid">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveUser">保存</el-button>
        <el-button type="primary" @click="showDialog=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "StudentCourseManage",
    data() {
      return {
        teachers:[],
        classes:[],
        rules: {
          userName: [
            { required: true, message: '请输入账号', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          permissionCode: [
            { required: true, message: '请选择角色', trigger: 'blur' }
          ],
          classNo: [
            { required: true, message: '学生请选择班级', trigger: 'blur' }
          ],
          name:[
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          teacher:[
            { required: true, message: '学生请选择辅导员', trigger: 'blur' }
          ]
        },
        user:{userName:'',password:'',permissionCode:'',classNo:'',name:'',teacher:''},
        showDialog:false,
        changed:false,
        name:'',
        loading:false,
        permissionCode:'',
        tableData:[],
        tableDataCache:[],
        cols:[{prop:'guid',label:'用户名主键',sort:false,hidden:true},
          {prop:'name',label:'姓名',sort:false,hidden:false},
          {prop:'updateTime',label:'更新时间',sort:false,hidden:false,dataType:'date'},
          {prop:'createTime',label:'创建时间',sort:true,hidden:false,dataType:'date'},
          {prop:'password',label:'密码',sort:true,hidden:true},
          {prop:'permission',label:'角色',sort:true,hidden:false},
          {prop:'operate',label:'操作',hidden:false,options:[
              {label:'重置密码',prop:'reset'},
              {label:'删除',prop:'delete',type:'danger'}
            ]}
        ],
        permissionsList:[{
          label:'全部',value:'all'
        },{
          label:'学生',value:'1'
        },{
          label:'教师',value:'2'
        }],
      }
    },
    methods:{
      addUser(){
        this.showDialog=true;
      },
      saveUser(){
        let g=this;
        debugger

        if (g.user.permissionCode!='1'){
          g.$delete(g.rules,'classNo');
          g.$delete(g.rules,'teacher');
        }
        let param={userName:g.user.userName,password:g.user.password,permissionCode:g.user.permissionCode,name:g.user.name};
        g.$refs.form.validate(valid=>{
          if (valid){
            if (g.user.permissionCode=='1'){
              g.$set(param,'teacherId',g.user.teacher);
              g.$set(param,'classNo',g.user.classNo);
            }
            g.$ajaxPost('/user/addUser',param).then(res=>{
              g.message({message:'保存成功',type:'success',onClose:()=>{
                  g.showDialog=false;
                  g.init();
                }})
            })
          }else{

          }



        })
      },
      changeUser(index,row,custometype){
        let g=this;
        if (custometype=='reset'){//重置密码
          g.$ajaxPost('/user/update',{userName:row.guid,password:"e10adc3949ba59abbe56e057f20f883e"}).then(res=>{
            g.message({message:'重置成功,密码为123456',type:'success'});
            g.changed=true;
          })
        }else{//删除
          g.$confirm('此操作将永久删除该用户信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            g.$ajaxDelete(`/user/${row.guid}`).then(res=>{
              g.changed=true;
              g.message({message:'删除成功',type:'success'});
            })
          }).catch(() => {
            g.message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      },
      async searchLoading(){
        let g=this;
        await this.init();
        g.tableData=g.tableDataCache.filter(data=>{
          if (!g.isNullOrEmpty(g.name)){
            return data.name.indexOf(g.name)!=-1;
          }
          return true;
        }).filter(data=>{
          if (!g.isNullOrEmpty(g.permissionCode)){
            if (g.permissionCode=='all'){
              return true;
            }
            return data.permissionCode==g.permissionCode;
          }
          return true;
        });
        g.$nextTick(()=>{
          g.changed=true;
        })
      }
      ,
      async init(){
        let users=await this.loadAll();
        let g=this;
        let classes=await  g.loadAllClass();
        g.classes=classes.map(data=>{
          let obj={};
          g.$set(obj,'classNo',data.classNo);
          g.$set(obj,'className',data.majorName+" "+data.gradeName+" "+data.className);
          return obj;
        })
        g.tableDataCache=JSON.parse(JSON.stringify(users));
        g.tableData=g.tableDataCache.map(data=>{
          switch (data.permissionCode) {
            case '1':
              data.permission='学生';
              break;
            case '2':
              data.permission='教师';
              break;
            case '1':
              data.permission='管理员';
              break;
            default:
              break;
          }
          return data;
        })
        g.teachers=await  g.loadAllTeachers();
      },
      async loadAll(){
        return this.$ajaxGet('/user/getAllUsers');
      },
      async loadAllClass(){
        return this.$ajaxGet('/class/getAllClasses');
      },
      async loadAllTeachers(){
        return this.$ajaxGet('/teacher/all');
      },
    },
    created() {
      this.init();
    }
  }
</script>

<style scoped>

</style>
